<!-- 扫描签到二维码后跳出的页面 -->
<script setup lang="ts">
import { checkInAPI } from '@/apis/checkIn'
import { fetchScanResultAPI } from '@/apis/fetchScanResult'
import router from '@/router'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

// 班级 id
const classId = ref('')
// 签到信息
const info = ref<ScanResult | null>(null)
// 是否处于加载中状态
const loading = ref(false)

onLoad(async (options) => {
  if (options && options.id) {
    classId.value = options.id
    try {
      loading.value = true
      const res = await fetchScanResultAPI(
        options.id,
        userInfoStore.userInfo!.token,
      )
      if (res.data?.code === 1)
        info.value = res.data?.data
      else
        uni.showToast({ title: res.data?.msg, icon: 'none' })

      loading.value = false
    }
    catch (err) {
      uni.showToast({ title: JSON.stringify(err), icon: 'none' })
      loading.value = false
    }
  }
  else {
    uni.showToast({ title: JSON.stringify(options), icon: 'none' })
  }
})

/**
 * @description 点击签到时触发
 */
const handleSubmit = useThrottleFn(async () => {
  try {
    const res = await checkInAPI(classId.value, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      router.replace({
        name: 'submitSuccess',
        params: { type: '签到' },
      })
    }
    else { uni.showToast({ title: res.data?.msg, icon: 'none' }) }
  }
  catch (err) {
    uni.showToast({ title: JSON.stringify(err), icon: 'none' })
  }
}, 1000)
</script>

<template>
  <Spacer height="20" />
  <RecordItem
    :picture="info?.course_images!"
    :title="info?.course_title || '未知标题'"
    :org="info?.course_place || '未知'"
    :teacher="info?.teacher_name || '未知'"
    :created-at="info?.course_start_time || '未知时间'"
  />
  <Spacer height="20" />
  <view class="rounded-20rpx bg-white px-25rpx py-20rpx card-shadow">
    <view class="text-28rpx text-#333333 font-medium leading-40rpx">
      报名人信息
    </view>
    <Spacer height="10" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        姓名
      </view>
      <view class="text-#919191">
        {{ info?.username || '未知姓名' }}
      </view>
    </view>
    <Divider width="650" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        手机号
      </view>
      <view class="text-#919191">
        {{ info?.mobile || '未知手机号' }}
      </view>
    </view>
    <Divider width="650" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        单位
      </view>
      <view class="text-#919191">
        {{ info?.company || '未知单位' }}
      </view>
    </view>
    <Divider width="650" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        职务
      </view>
      <view class="text-#919191">
        {{ info?.duties || '未知职务' }}
      </view>
    </view>
  </view>
  <view class="fixed bottom-0 z-10 h-168rpx w-750rpx flex items-center justify-center bg-white pb-48rpx x-center">
    <button
      class="h-100rpx w-650rpx flex items-center justify-center rounded-full bg-#0037AE text-30rpx text-white font-medium leading-42rpx"
      hover-class="bg-#3266D9"
      @tap="handleSubmit"
    >
      提交
    </button>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'checkInInfo'
style:
  navigationBarTitleText: '签到参与培训'
</route>
